
import { CSSProperties, useContext } from 'react'
import './EditorItemBox.css'
import { KaseoEditorModel } from '../../editor/KaseoEditorModel'
import { EditorModelContext } from './EditorModelContext'

let c = 0

function ItemBoxTabItem(props: {
    label: string
}) {
    return (
        <div className='kaseo-editor-item-tab-item'>
            {c++}
        </div>
    )
}

function ContentBoxItem(props: {
    label: string
}) {
    return (
        <div className='kaseo-editor-content-item'>
            {c++}
        </div>
    )
}

function ItemBoxTab() {
    const model = useContext(EditorModelContext)

    return (
        <div className='kaseo-editor-item-tabs'>
            <ItemBoxTabItem label='300000'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
            <ItemBoxTabItem label='120'/>
        </div>
    )
}

function ContentBox() {
    return (
        <div className='kaseo-editor-item-content-box'>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
            <ContentBoxItem label='123'/>
        </div>
    )
}

export default function EditorItemBox(props: {
    style?: CSSProperties
}) {
    const model = useContext(EditorModelContext)

    return (
        <div className='kaseo-editor-item-box' style={props.style}>
            <div style={{ 
                    position: 'relative', padding: 0, margin: 0, 
                    height: '100%', width: '100%'
                }}>
            <ItemBoxTab/>
            <ContentBox/>
            </div>
        </div>
    )
}
